//首页横幅
'use strict';
import React,{Component} from 'react';
import Util from '../common/util';
import styles from '../style/styles';
import Icon from 'react-native-vector-icons/Ionicons';
import GoodsList from '../goods/goodsList';
import Toast from '../common/ToastUtil';
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    TextInput,
    ScrollView
} from 'react-native';

export default class HomeLogo extends Component{
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            words:''
        };
    }

    toGoodsList(cate_id,cate_name){
        this.props.navigator.push({
            component:GoodsList,
            passProps:{
                cate_id:cate_id,
                title:cate_name
            }
        })
    }

    toSearch(){
        let words = this.state.words
        if(words){
            this.props.navigator.push({
                component:GoodsList,
                passProps:{
                    title:words,
                    key_words:words
                }
            })

        }else{
            Toast.show('请输入搜索关键词')
        }

    }

    render(){
        let indexData = this.props.indexData
        return(
            <View style={{backgroundColor:"#fff"}}>
                <View style={{paddingBottom:10}}>
                    <Image
                        source={{uri:indexData.store_logo}}
                        resizeMode={'cover'}
                        style={styles.store_logo}
                    />
                    <View style={styles.logo_search_view}>
                        <View style={styles.search_view}>
                            <TextInput
                                placeholder='搜索商品'
                                underlineColorAndroid={'transparent'}
                                style={styles.new_search_view}
                                onChangeText={(txt)=>this.setState({words:txt})}
                                onSubmitEditing={()=>this.toSearch()}
                                iosreturnKeyType={'search'}
                            />
                            <TouchableOpacity onPress={()=>this.toSearch()}>
                                <Icon name={'ios-search-outline'} size={20} color={'#bbbbbb'}/>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
                <ScrollView style={{width:Util.size.width,height:40}} horizontal={true}>
                    <View style={{flexDirection:'row',paddingHorizontal:10}}>
                        <View style={styles.home_cate_item}>
                            <Text style={{fontSize:14,color:"#000"}}>首页</Text>
                        </View>
                        {
                            indexData.goods_cate_name_list.map((item,index)=>{
                                return(
                                    <TouchableOpacity onPress={()=>this.toGoodsList(item.cate_id,item.cate_name)} key={index} style={styles.home_cate_item}>
                                        <Text numberOfLines={1} style={{fontSize:14,color:"#000"}}>{item.cate_name}</Text>
                                    </TouchableOpacity>
                                )
                            })
                        }
                    </View>
                </ScrollView>
            </View>
        )
    }
}